<template>
  <base-modal class="material-receiving-information-dialog-container" :title="$t('task.detail.components.fillInMaterialInfo')" :show.sync="visible" width="800px" @closed="reset">
    <form @submit.prevent="submit" class="edit-contact-form-container">
      <form-builder :fields="fields" class="edit-contact-form" ref="form" :value="form" @update="update"> </form-builder>
      <div class="dialog-footer" slot="footer">
        <el-button :disabled="pending" @click="pre">{{ $t('common.base.previousStep') }}</el-button>
        <el-button native-type="submit" type="primary" :disabled="pending">{{ $t('common.base.submit') }}</el-button>
      </div>
    </form>
  </base-modal>
</template>

<script>
export default {
  name: 'material-receiving-information-dialog',
  props: {
    pending: {
      type: Boolean,
      default: false,
    },
    task: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      data: [],
      form: {
        applyWay: '',
        recipient: '',
        address: {},
        phone: '',
      },
      isRequired: 0,
    };
  },
  watch: {
    visible(newValue) {
      if (newValue === true) {
        if (this.task.id) {
          const { tlmPhone, taddress, tlmName } = this.task;
          let customerAddress_ = taddress
            ? {
                address: taddress.adAddress,
                city: taddress.adCity,
                country: taddress.adCountry,
                dist: taddress.adDist,
                latitude: taddress.adLatitude,
                longitude: taddress.adLongitude,
                province: taddress.adProvince,
                ...taddress,
              }
            : {};
          this.form.address = customerAddress_;
          this.form.phone = tlmPhone || '';
          this.form.recipient = tlmName || '';
        }
      }
    },
  },
  computed: {
    fields() {
      // TODO 国际化待办
      return [
        {
          formType: 'select',
          fieldName: 'applyWay',
          displayName: this.$t('task.detail.components.applyMethod'),
          placeholder: this.$t('task.detail.components.applyMethodPlaceholder'),
          isNull: 0,
          setting: {
            dataSource: [
              { text: this.$t('task.detail.components.logistics'), value: '物流' },
              { text: this.$t('task.detail.components.selfLifting'), value: '自提' },
            ],
          },
        },
        {
          formType: 'text',
          fieldName: 'recipient',
          displayName: this.$t('task.detail.components.addressee'),
          placeholder: this.$t('task.detail.components.addresseePlaceholder'),
          isNull: this.isRequired,
          setting: {
            dependencies: {
              applyWay: [this.$t('task.detail.components.logistics')],
            },
          },
        },
        {
          formType: 'phone',
          fieldName: 'phone',
          displayName: this.$t('common.base.phone'),
          placeholder: this.$t('task.detail.components.phonePlaceholder'),
          isNull: this.isRequired,
          setting: {
            dependencies: {
              applyWay: [this.$t('task.detail.components.logistics')],
            },
          },
        },
        {
          formType: 'address',
          fieldName: 'address',
          displayName: this.$t('common.base.address'),
          placeholder: this.$t('task.detail.components.addressPlaceholder'),
          isNull: this.isRequired,
          setting: {
            dependencies: {
              applyWay: [this.$t('task.detail.components.logistics')],
            },
          },
        },
      ];
    },
  },
  methods: {
    /**
     * @description 打开弹窗
     */
    open() {
      this.visible = true;
    },
    /**
     * @description 关闭弹窗
     */
    close() {
      this.visible = false;
    },
    /**
     * @description 上一步
     */
    pre() {
      this.visible = false;
      this.$emit('pre');
    },
    update({ field, newValue, oldValue }) {
      let { fieldName, displayName } = field;
      if (this.$appConfig.debug) {
        console.info(`[FormBuilder] => ${displayName}(${fieldName}) : ${JSON.stringify(newValue)}`);
      }

      // TODO 国际化待办
      this.isRequired = fieldName === 'applyWay' && newValue === '自提' ? 1 : 0;

      this.$set(this.form, fieldName, newValue);
    },
    reset() {
      this.form = {
        applyWay: '',
        recipient: null,
        address: {},
        phone: null,
      };
    },
    async submit() {
      const validateRes = await this.$refs.form.validate();
      if (!validateRes) return;

      let params = {
        ...this.form,
      };
      this.$emit('submit', params);
      // this.visible = false
    },
  },
};
</script>

<style lang="scss" scoped>
.material-receiving-information-dialog-container {
  ::v-deep .base-modal-body {
    padding: 16px 16px !important;
  }

  .edit-contact-form-container {
    width: 100%;
    margin: 0 auto;

    .edit-contact-form {
      padding: 10px 0 5px;
    }

    .form-item label {
      width: 80px;
    }

    .form-item-control {
      max-width: calc(100% - 80px);
    }
  }

  .dialog-footer {
    text-align: right;
    // padding: 10px 20px;
  }
}
</style>
